<template>
  <br />
  <z-button type="primary" @click="openNotification">
    Open the notification box (update by key)
  </z-button>
  <br />
  <br />
  <z-button type="primary" @click="openNotification2">
    Open the notification box (update by reactive)
  </z-button>
</template>

<script>
import { notification } from '../../../../lib/index.js'
import { defineComponent, ref } from 'vue'
const key = 'updatable'

export default defineComponent({
  setup() {
    const openNotification = () => {
      notification.open({
        key,
        message: 'Notification Title',
        description: 'description.'
      })
      setTimeout(() => {
        notification.open({
          key,
          message: 'New Title',
          description: 'New description.'
        })
      }, 1000)
    }
    const message = ref('Notification Title')
    const description = ref('description')
    const openNotification2 = () => {
      // content must use function
      notification.open({
        message: () => message.value,
        description: () => description.value
      })
      setTimeout(() => {
        message.value = 'New Title'
        description.value = 'New description.'
      }, 1000)
    }
    return {
      openNotification,
      openNotification2
    }
  }
})
</script>
